<template>
  <view class="item">
    <view class="tips"></view>
    <view class="logo">
      <image :src="data.holeLogo"></image>
    </view>
    <view class="info">
      <view class="info-top">
        <view class="info-left">
          <view class="name">{{data.holeName}}</view>
          <view class="num">最高可借（元）</view>
        </view>
        <view class="info-right">
          <view class="interest">日利率：1%</view>
          <view class="money"><text>￥</text>{{data.limitRange}}</view>
        </view>
      </view>
      <view class="info-bottom">
        {{data.txt}}
      </view>
    </view>
    <view class="btn">
      <u-button @click="handleToH5" ripple type="primary" size="mini">立即申请</u-button>
    </view>
  </view>
</template>

<script>
export default {
  name: "product",
  props:{
    data:{}
  },
  methods:{
    handleToH5(){
      uni.navigateTo({
        url:'pages/user/H5page?url='+this.data.linkAddress
      })
    }
  }
}
</script>

<style scoped lang="scss">
.item{
  position: relative;
  width: 100%;
  height: 150rpx;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 100rpx 40rpx 100rpx 50rpx;
  .tips{
    position: absolute;
    width: 100rpx;
    height: 100rpx;
    left: 0;
    top: 0;
    background: url(~@/static/image/tips.png) 0/100% 100%;
  }
  .logo{
    width: 100rpx;
    height: 100rpx;
    background: #5C69E3;
    margin-right: 20rpx;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .info{
    width: 400rpx;
    .info-top{
      display: flex;
      .info-left{
        .name{
          font-size: 32rpx;
          font-weight: bold;
          margin-bottom: 10rpx;
        }
        .num{
          font-size: 24rpx;
          color: #999;
        }
      }
      .info-right{
        text-align: center;
        .interest{
          font-size: 24rpx;
          color: #f32222;
          margin-bottom: 6rpx;
          margin-top: 4rpx;
        }
        .money{
          font-size: 36rpx;
          color: red;
          font-weight: bold;
          text{
            font-size: 24rpx;
          }
        }
      }
    }
  }
  .btn{
    margin-left: 30rpx;
  }
}
</style>
